<template>
	<div class="poster">
		<div class="layer" v-show="shows">
			<div class="model">
				<div class="content"  ref="QRcodeSrcImg">
					<div class="model_title">
						xxxxx
					</div>
					<div class="logo">
						<img src="../../public/img/login-bgc.png" alt="">
					</div>
					<div class="code">
						<img src="../../public/img/code.png" alt="">
					</div>		
				</div>
				<div class="btn">
					<el-button @click="submit">分享</el-button>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	// <poster @imgSrc="imgSrc"></poster>
	
	import html2canvas from 'html2canvas'
	export default{
		data(){
			return{
				loading:null,
				shows:true
			}
		},
		methods:{
			submit(){
				this.Html2Canvas();
			},
			Html2Canvas(){
				this.loading = this.$loading({
			        lock: true,
			        text: 'Loading',
			        spinner: 'el-icon-loading',
			        background: 'rgba(0, 0, 0, 0.7)'
				})
					//做一个等待加载的
                let that = this;
			      // let _this = this;
			      // _this.photoShow = true;
			      // 声明一个画布元素,存储需下载图片范围
			      let canvas = document.createElement("canvas");
			      // 获取需下载范围元素
			      let img = this.$refs["QRcodeSrcImg"];
			      // 图片高度
			      var w = parseInt(window.getComputedStyle(img).width);
			      // 图片宽度
			      var h = parseInt(window.getComputedStyle(img).height);
			      // 声明画布宽高
			      canvas.width = w*4;
			      canvas.height = h*4;
			      canvas.style.width = w + "px";
			      canvas.style.height = h + "px";
			      let context = canvas.getContext("2d");
			      context.scale(2, 2);
			      // 利用 html2canvas 下载 canvas
			      html2canvas(img, {
			          //canvas: canvas, //自定义 canvas
			          //logging: false, //日志开关，便于查看html2canvas的内部执行流程
			          useCORS: true // 【重要】开启跨域配置
			      }).then((canvas) =>{
			      		this.loading.close();
			      		this.shows = false;
			      		this.$emit('imgSrc',canvas.toDataURL('image/png'));
		                // var imgData=that.dataURLtoBlob(canvas.toDataURL('image/png'));
		                // that.uploadImage(imgData)
			      });
			},
		}
	}
</script>
<style lang="scss" scoped>
	.poster{

	}
	.layer{
		background: rgba(0,0,0,0.5);
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		.model{
			position: fixed;
			  top: 50%;
			  left: 50%;
			  background-color: #fff;
			  max-width: 650px;
			-webkit-transform: translateX(-50%) translateY(-50%);
			.content{
				position: relative;
				.model_title{
					text-align: center;
					width: 100%;
					line-height: 40px;
				}
				.logo{
					width: 100%;
					height: 500px;
					img{
						width: 100%;
						height: 100%;
					}
				}
				.code{
					position: absolute;
					bottom: 0;
					width: 100px;
					height: 100px;
					right: 0;
					img{
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
</style>